* {
    margin:0;
    padding:0;
}

.content{
    display: -webkit-flex;
    -webkit-flex-direction:column;
    -moz-flex-direction:column;
    width: 100%;
    height: 600px;
}

.frist{
    height: 100px;
    -webkit-flex:1;
    -webkit-order:2;
    -moz-flex:1;
    -moz-order:2;
    background-color: #0D84BF;
}

.secend{
    height: 100px;
    -webkit-flex:1;
    -webkit-order:3;
    -moz-flex:1;
    -moz-order:3;
    background-color: #90847A;
}

.three{
    height: 200px;
    -webkit-flex:1;
    -webkit-order:1;
    -moz-flex:1;
    -moz-order:1;
    background-color: #D44A40;
}

.content2{
    display:-webkit-box;
    -weikit-box-orient:vertical;
    -moz-box-orient:vertical;
}

.frist2{
    height: 100px;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    background-color: #0D84BF;
}

.secend2{
    height: 100px;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    background-color: #90847A;
}

.three2{
    height: 200px;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    background-color: #D44A40;
}
